<template>
    <div class="edit">
        <!-- 主体 -->
        <div class="main">
            <p class="title">医生接诊普通排班</p>
            <div class="box">
                <!-- 添加接诊医生  -->
                <Button type="primary" @click="addDoctr">
                    <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>添加排班医生
                </Button>
                <!-- 接诊医生显示 -->
                <div class="doctor" v-show='selectExpert.doctorName'>
                    <!-- 医院 -->
                    <span>{{ selectExpert.hospitalName }}</span>
                    <!-- 科室 -->
                    <span>{{ selectExpert.deptName }}</span>
                    <!-- 医生姓名 -->
                    <span>{{ selectExpert.doctorName }}</span>
                </div>
                <!-- 医生已开通服务 -->
                <div class = 'service' v-show='selectExpert.doctorName'>
                    <span>医生已开通服务：</span>
                    <div style='margin-right:8px;width:auto;' v-for='item in servericeList'>
                        <Card style="width:110px;">
                            <Checkbox v-model="item.flag">{{ item.menuName }}</Checkbox>
                        </Card>
                    </div>
                </div>
                <!-- 选择专家 -->
                <Modal v-model="modal1" title="选择专家" :footer-hide="true" width="800" :styles="{top: '20px'}">
                    <div class="modelExpert">
                        <div class="searchExpertList">
                            <input type="text" placeholder="输入医生姓名、医院、科室" style='width:230px;margin-right:10px;' v-model.trim="searchName">
                            <Button type="primary" icon="ios-search" @click="searchExpert">查询</Button>
                        </div>
                        <Table stripe :columns="columns" border :data="expertList"style='width:100%;'></Table>
                        <div class="total">
                            <Page :total="expertSize" :current="expertNo" @on-change="change1"/>
                        </div>
                    </div>
                </Modal>
                <div class="paiban">
                    <span>排班模式：</span>
                    <RadioGroup v-model="timeType">
                        <Radio :label="1">普通设置</Radio>
                        <Radio :label="2">分时段设置</Radio>
                    </RadioGroup>
                </div>
                <!-- 列表 -->
                <div class="table">
                    <p>设置接诊数量</p>
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>时间</td>
                            <td>预约时间段</td>
                            <td>星期一</td>
                            <td>星期二</td>
                            <td>星期三</td>
                            <td>星期四</td>
                            <td>星期五</td>
                            <td>星期六</td>
                            <td>星期日</td>
                        </tr>
                        <tr>
                            <td>上午</td>
                            <td>
                                <TimePicker
                                    :open="false"
                                    :value="value2"
                                    format="HH:mm"
                                    type="timerange"
                                    :editable="false"
                                    :disabled="true"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                >
                                  <a href="javascript:void(0)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template>{{ value2[0] + '-' + value2[1] }}</template>
                                  </a>
                                </TimePicker> 
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd11"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd21"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd31"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd41"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd51"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd61"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd71"></InputNumber>
                            </td>
                        </tr>
                        <tr>
                            <td>下午</td>
                            <td>
                                <TimePicker
                                    :open="false"
                                    :value="value3"
                                    format="HH:mm"
                                    type="timerange"
                                    :editable="false"
                                    :disabled="true"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                >
                                  <a href="javascript:void(0)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template>{{ value3[0] + '-' + value3[1] }}</template>
                                  </a>
                                </TimePicker>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd12"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd22"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd32"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd42"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd52"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd62"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wd72"></InputNumber>
                            </td>
                        </tr>
                        <tr>
                            <td>晚上</td>
                            <td>
                                <TimePicker
                                    :open="false"
                                    :value="value5"
                                    format="HH:mm"
                                    type="timerange"
                                    placement="bottom-end"
                                    placeholder="时间段"
                                    style="width: 120px"
                                    :editable="false"
                                    :disabled="true"
                                >
                                  <a href="javascript:void(0)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template>{{ value5[0] + '-' + value5[1] }}</template>
                                  </a>
                                </TimePicker>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn12"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn22"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn32"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn42"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn52"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn62"></InputNumber>
                            </td>
                            <td>
                                <InputNumber min="1" max="99" v-model="wn72"></InputNumber>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="inputnum">
                    <span>预约期限：</span>
                    <InputNumber v-model.trim="term" :max="99" :min="0" placeholder="请输入预约期限"></InputNumber>
                </div>
                <!-- 预约备注 -->
                <div class="text">
                    <span>预约备注：</span>
                    <Input v-model.trim="text_info" type="textarea" maxlength="80" :rows="4" placeholder="请输入备注"/>
                </div>
                <!-- <div class="footer">
                    <div style='margin-top:10px;width:50%;'>
                        <span>班外时间可接诊：</span>
                        <iSwitch v-model="classTime"  size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                        <p style="color:#ff9966;line-height:35px" v-if="classTime == true ">（备注：开启后，在设置排班以外的时间，也可以接诊。）</p>
                        <p style="color:#ff9966;line-height:35px" v-if="classTime == false ">（备注：关闭后，非排班时间不可以接诊。）</p>
                    </div>
                    <div style='margin-top:10px;width:50%'>
                        <span>班内排班启用标识：</span>
                        <iSwitch v-model="inClassTime"  size="large">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </iSwitch>
                        <p style="color:#ff9966;line-height:35px" v-if="inClassTime == true ">（备注：开启后，班内设置排班以内，方可以接诊。）</p>
                        <p style="color:#ff9966;line-height:35px" v-if="inClassTime == false ">（备注：关闭后，即便设置排班，班内时间也不可以接诊。）</p>
                    </div>
                </div>                        -->
            </div>                      
        </div>
        <!-- 保存 -->
        <div class="save">
            <Button type="primary" @click="save" :loading="submitLoading">
                <Icon type="ios-checkmark" style="margin-right: 5px" />保存
            </Button>
            <Button @click="back">
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
            </Button>
        </div>
    </div>
</template>
<script>
import tempHeader from "@/components/tmpHeader";
import { TimePicker } from "view-design";
import api from "@/api/commonApi";
import { Card } from 'view-design'
export default {
    components: {
        tempHeader,
        TimePicker,
        Card
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,

            topLength: 9999,
            botLength: 9999,
            NightLength: 9999,
            switch1: true,
            text_info: "",
            term: "",
            // 添加专家model
            modal1: false,
            expertNo: 1,
            expertSize: 10,
            // 上午时间
            value2: ["08:00", "12:00"],
            // 下午时间
            value3: ["13:00", "17:00"],
            // 晚上时间
            value5: ['18:00','21:00'],
            //上午号源
            wd11: null,
            wd21: null,
            wd31: null,
            wd41: null,
            wd51: null,
            wd61: null,
            wd71: null,
            //下午号源
            wd12: null,
            wd22: null,
            wd32: null,
            wd42: null,
            wd52: null,
            wd62: null,
            wd72: null,
            //晚上号源
            wn12: null,
            wn12: null,
            wn22: null,
            wn32: null,
            wn42: null,
            wn52: null,
            wn62: null,
            wn72: null,
            timeType: null,
            // 医院ID
            id: '',
            selectExpert: {},
            expertList: [],
            // 医生表头信息
            columns:[
                {
                    title:"医院名称",
                    key:"hospitalName",
                    align:"center"
                },
                {
                    title:"科室名称",
                    key:"deptName",
                    align:"center"
                },
                {
                    title:"医生名称",
                    key:"doctorName",
                    align:"center"
                },
                {
                    title:"职称",
                    key:"title",
                    align:"center"
                },
                {
                    title:"选择",
                    align:"center",
                    render:(h,params) =>{
                        let row = params.row;
                        
                        return [
                            h('a',{
                                on:{
                                    click: () => {
                                        this.expert(row)
                                    }
                                }
                            },"选择")
                        ]
                    }
                }
            ],
            searchName: "",
            // 班外时间可接诊
            classTime: true,
            // 班内时间
            inClassTime: true,

            single: true,
        };
    },
    created() {
        this.province = this.$route.query.province?parseInt(this.$route.query.province):null;
        this.city = this.$route.query.city?parseInt(this.$route.query.city):null;
        this.area = this.$route.query.area?parseInt(this.$route.query.area):null;
        this.hospital = this.$route.query.hospital?this.$route.query.hospital:null;
        this.selectExpert.hospitalName = this.$route.query.hospitalName?this.$route.query.hospitalName:null;
        this.selectExpert.hospitalId = this.$route.query.hospitalId?this.$route.query.hospitalId:null;
        this.selectExpert.deptName = this.$route.query.deptName?this.$route.query.deptName:null;
        this.selectExpert.deptType = this.$route.query.deptType?this.$route.query.deptType:null;
        this.selectExpert.doctorName = this.$route.query.doctorName?this.$route.query.doctorName:null;
        this.selectExpert.doctorId = this.$route.query.doctorId?this.$route.query.doctorId:null;
        this.term = this.$route.query.term?this.$route.query.term:null;
        this.text_info = this.$route.query.remarks?this.$route.query.remarks:null;
        this.timeType = this.$route.query.timeType?this.$route.query.timeType:1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/operation/interScheduling",
                title: "互联网排班"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        // 加载弹窗并请求医生接口
        addDoctr() {
            this.searchExpert();
            this.modal1 = true;
        },
        //  取消,后退 上一次
        back() {
            let pageNo = this.$route.query.pageNo;
            // function全局方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/InterScheduling/list",
                {
                    pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2
                }
            );
        },
        // 模态框的分页器改变
        change1(index) {
            this.expertNo = index;
            this.searchExpert();
        },
        //切换排班模式
        changetimeType() {
          this.functionJS.queryNavgationTo(
            this,
            "/index/doctorOperation/InterScheduling/doctor/segmentationedit",
            {
              id: this.id,
              province: this.province,
              city: this.city,
              area: this.area,
              hospital: this.hospital,
              hospitalName: this.selectExpert.hospitalName,
              hospitalId: this.selectExpert.hospitalId,
              deptName: this.selectExpert.deptName,
              deptType: this.selectExpert.deptType,
              doctorName: this.selectExpert.doctorName,
              doctorId: this.selectExpert.doctorId,
              term: this.term,
              remarks: this.text_info,
              timeType: 2
            }
          );
        },
        // 保存/新增专家
        save() {
            // 医生服务
            let typeList = []
            this.servericeList.forEach(item =>{
                if(item.flag) {
                    typeList.push(item.serviceType)
                }
            })
            // 号源
            let timsList = []
            for (let i = 1; i <= 7; i++) {
                for (let j = 1; j <= 2; j++) {
                let tmpObj = {};
                if (j == 1) {
                    tmpObj.timeStart = this.value2[0];
                    tmpObj.timeEnd = this.value2[1];
                } else if (j == 2) {
                    tmpObj.timeStart = this.value3[0];
                    tmpObj.timeEnd = this.value3[1];
                } else if (j == 3) {
                    tmpObj.timeStart = this.value5[0];
                    tmpObj.timeEnd = this.value5[1];
                }
                if (this["wd" + i + j] != null && this["wd" + i + j] > 0) {
                    tmpObj.num = this["wd" + i + j];
                    tmpObj.day = j;
                    tmpObj.week = i;
                    timsList.push(tmpObj);
                }
                }
            }
            if (timsList.length <= 0) {
                flag = false;
                this.$Message.error({
                content: "请至少有一个号源有号再保存，谢谢",
                duration: 5
                });
                return false;
            }
            let params = {
                "areaCode": this.area,
                "cityCode": this.city,
                "provinceCode": this.province,
                "doctorId": this.selectExpert.doctorId,
                "doctorName": this.selectExpert.doctorName,
                "hospitalId": this.selectExpert.hospitalId,
                "isUsed": Number(this.inClassTime).toString(),
                "outUsed": Number(this.classTime).toString(),
                "remark": this.text_info,
                "term": this.term,
                timesList: timsList,
                typeList,
                type: 1,
                timeType: 1           //普通设置1，分时段设置2
            }
            if(params.timesList.length == 0) {
                this.$Message.error("请选择号源")
                return ""
            }
            if(!Boolean(params.doctorId)) {
                this.$Message.error("请选择医生!");
                return ""
            } else if (!this.value2[1] || !this.value3[1] || !this.value5[1]) {
                this.$Message.error("请检查是否有时间段未填写完整!");
                return ""
            } else if (typeList.length <= 0) {
                this.$Message.error("请确认该医生权限配置或职称价格是否配置")
                return ''
            }
            this.submitLoading = true;
            console.log(JSON.stringify(params))
            this.$axios.post(api.insertScheduling, params).then(res => {
                console.log(res);
                if (res.data.code) {
                    this.submitLoading = false;
                    this.$Message.success(res.data.object.success);
                    this.back()
                } else {
                    this.submitLoading = false;
                    this.$Message.error("添加失败")
                }
            });          
        },
        // 选择专家
        expert(item) {
            this.modal1 = false;
            this.selectExpert = item;
            // 通过选择的医生加载医生服务列表
            this.$axios.post(api.schedulingMenuList, {
                doctorId: item.doctorId
            }).then(res => {
                if(res.data.success) {
                    let ret = res.data;
                    this.servericeList = ret.object;
                    this.servericeList.forEach(item => {                        
                        item.flag = false;
                    })
                    if(this.servericeList.length == 0) {
                        this.$Message.info('服务列表为空')
                    }
                } else {
                    this.$Message.error(ret.message)
                }
            })
        },
        // 获取医生权限管理
        searchExpert() {
            this.$axios
                .post(api.schedulingDoctorList, {
                    pageNo: this.expertNo,
                    pageSize: 10,
                    searchKey: this.searchName.trim(),
                    type: 1,
                    "areaCode": this.area,
                    "cityCode": this.city,
                    "hospitalId": this.hospital,
                    provinceCode : this.province
                })
                .then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.expertList = ret.records;
                        this.expertSize = ret.total;
                    } else {
                        this.$Message.error("加载医生权限管理失败")
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
.edit {
    width: 100%;
    padding: 10px 0;
    margin: 0 auto;
    background: #fff;
    .main {
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        .box{
            padding: 0 30px;
        }
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .service{
            margin-top:20px;
            display:flex;
            flex-direction: row;
            align-items:center;
        }
        .doctor {
            width: 100%;
            display: flex;
            height: 40px;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            span {
                margin-right: 20px;
                font-size: 20px;
            }
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            .item-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100px;
            }
            .w-select {
                width: 150px;
            }
        }
        .table {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            p {
                text-align: center;
                margin: 10px 0;
            }
            table {
                width: 100%;
                border: 1px solid #ddd;
                tr:not(:first-child):hover {
                    background: #ebf7ff;
                }
                tr:first-child{
                    background: #f8f8f9;
                }
                tr {
                    
                    border-top: 1px solid #ddd;
                    height: 40px;
                    td {
                        text-align: center;
                    }
                    td.none {
                        display: none;
                    }
                }
            }
            .nodata {
                width: calc(100% - 1px);
                line-height: 40px;
                background: #fff;
                border: 1px solid #ddd;
                border-top: none;
                text-align: center;
            }
        }
        .text {
            width: 100%;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .inputnum {
            width: 20%;
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .paiban {
            width: 20%;
            margin: 15px 0;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
    }
    .save {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 200px;
        margin: 10px auto;
        justify-content: space-around;
    }
    .footer{
        display: flex;
        margin-bottom: 30px;
    }
}
.modelExpert {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .total {
        text-align: center;
        margin: 10px 0;
    }
    .modelExpert_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        span {
            width: 25%;
            text-align: center;
            user-select: none;
        }
    }
    .searchExpertList {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 20px;
        input {
            width: 80%;
            background: #fff;
            border: none;
            outline: none;
            text-indent: 10px;
            line-height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    }
}
</style>

